﻿@model SmartParking.Web.Models.ListModel

@{
    if (Layout != null && Layout != "_MobileLayout.cshtml")
    {
        Layout = "_MobileLayout.cshtml";
    }
    var listModelAsJSON = new HtmlString(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
}

<script type='text/javascript'>
    $(document).ready(function () {
        window.listMVJSON = @listModelAsJSON;
    });
    
    $(document).on("pageinit", "#page", function () {
        // Swipe to remove list item
        $(document).on("swipeleft swiperight", "#list li.ui-li", function (event) {
            if (!window.listMVJSON.ReadOnly) {
                var listitem = $(this),
                    // These are the classnames used for the CSS transition
                    dir = event.type === "swipeleft" ? "left" : "right",
                    // Check if the browser supports the transform (3D) CSS transition
                    transition = $.support.cssTransform3d ? dir : false;
                confirmAndDelete(listitem, transition);
            }
        });

        // If it's not a touch device...
        if (!$.mobile.support.touch) {
            // Remove the class that is used to hide the delete button on touch devices				
            $("#list").removeClass("touch");

            // Click delete split-button to remove list item
            $(".delete").on("click", function () {
                var listitem = $(this).parent("li.ui-li");
                confirmAndDelete(listitem);
            });
        }

        function confirmAndDelete(listitem, transition) {
            // Highlight the list item that will be removed
            listitem.addClass("ui-btn-down-d");
            // Inject topic in confirmation popup after removing any previous injected topics
            $("#confirm .topic").remove();
            listitem.find("h3").clone().insertAfter("#question");
            // Show the confirmation popup
            $("#confirm").popup("open");
            // Proceed when the user confirms
            $("#confirm #yes").on("click", function () {
                // Remove with a transition
                if (transition) {
                    listitem
                        // Remove the highlight
                        .removeClass("ui-btn-down-d")
                        // Add the class for the transition direction
                        .addClass(transition)
                        // When the transition is done...
                        .on("webkitTransitionEnd transitionend otransitionend", function () {
                            // ...the list item will be removed
                            listitem.remove();
                            // ...the list will be refreshed and the temporary class for border styling removed
                            $("#list").listview("refresh").find(".ui-li.border").removeClass("border");
                        })
                        // During the transition the previous list item should get bottom border
                        .prev("li.ui-li").addClass("border");
                    
                    listAction(listitem.find("input:hidden").val());
                }
                // If it's not a touch device or the CSS transition isn't supported just remove the list item and refresh the list
                else {
                    if (listAction(listitem.find("input:hidden").val())) {
                        listitem.remove();
                        $("#list").listview("refresh");
                    }
                }
            });
            // Remove active state and unbind when the cancel button is clicked
            $("#confirm #cancel").on("click", function () {
                listitem.removeClass("ui-btn-down-d");
                $("#confirm #yes").off();
            });
        }
    });
</script>

@{
    var group = "";    
    <ul id="list" class="touch" data-role="listview" data-inset="true" data-icon="false" data-split-icon="delete" data-split-theme="c">
        @if (!String.IsNullOrEmpty(@Model.Title))
        {
            <li data-role="list-divider" role="heading">@Model.Title</li>
        }
        @if (Model.Items.Any())
        {
            foreach (var item in Model.Items)
            {
                var action = "#";
                if (!String.IsNullOrEmpty(Model.ItemDetailView))
                {
                    action = Url.Action(Model.ItemDetailView, new {id = item.ItemId});
                }
                if (group != item.Group)
                {
                    group = item.Group;
                    if (!String.IsNullOrEmpty(group))
                    {
                        <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-li-has-count">
                            @group
                            <span class="ui-li-count ui-btn-up-c ui-btn-corner-all">@Model.Items.Count(i => i.Group == group)</span>
                        </li>
                    }
                }
                <li data-theme="d">
                    <a href="@action">
                        @Html.Hidden("ItemId", item.ItemId)
                        <p class="ui-li-aside ui-li-desc"><strong>@item.RightLine</strong></p>
                        <h3>@item.Title</h3>
                        @foreach (var line in @item.Lines)
                        {
                            <p class="topic">
                                @if (line.Title != String.Empty)
                                {
                                    <strong>@line.Title: </strong>
                                }
                                @if (line.Bold)
                                {
                                    <strong>@line.Content</strong>
                                }
                                else
                                {
                                    @line.Content
                                }
                            </p>
                        }
                    </a>
                    @if (!Model.ReadOnly)
                    {
                        <a href="#" class="delete" style="visibility: visible">Eliminar</a>
                    }
                    else
                    {
                        <a href="#" class="delete" style="visibility: hidden">Eliminar</a>
                    }
                </li>
            }
        }
        else
        {
            if (!String.IsNullOrEmpty(Model.EmptyMessage))
            {
                <li data-theme="c">
                    <a href="#">
                        <div style="text-align: center; word-wrap: break-word;">
                            <h3>@Model.EmptyMessage</h3>
                        </div>
                    </a>
                </li>
            }
        }
    </ul>
}

<div id="confirm" class="ui-content" data-role="popup" data-theme="none">
    <p id="question">Seguro que desea eliminar?</p>
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <a id="yes" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Si</a>
        </div>
        <div class="ui-block-b">
            <a id="cancel" data-role="button" data-mini="true" data-shadow="false" data-theme="b" data-rel="back">Cancelar</a>
        </div>
    </div>
</div>
